<template>
  <div v-if="is_info" class="content-checkbox">
    <span v-for="v in content_arr" v-html="v"></span>
  </div>
  <div v-else class="form_item-checkbox">
    <input type="hidden" :name="name" :value="value" />
    <checkbox_loop ref="layer" v-for="row in options" :value="value" :size="size" @change="$emit('change',$event)" @update:value="$emit('update:value',$event)" :row="row"></checkbox_loop>
  </div>
</template>

<script>
import checkbox_loop from './checkbox_loop.vue';
import s94Mjs from "s94-js";
import {decode_config} from "@/js/s94_tool.js";
export default {
  _title_: '多选',
  _can_config_: true,
  _can_form_param_: true,
  _can_where_param_: true,
  name: "checkbox",
  components: {
    checkbox_loop: checkbox_loop
  },
  props: ['name', 'value', 'config', 'is_info', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      options: decode_config(this.config),
    }
  },
  watch: {
    config(v, oldV){
      this.options = decode_config(v);
    },
    value(v){
      if (this.is_info) return;
      setTimeout(()=>{
        let allon_arr = [];
        this.$refs["layer"].forEach(v=>{
          allon_arr.push(v.allon)
        })
      },500)
    }
  },
  computed: {
    content_arr(){
      let value = s94Mjs.trim(s94Mjs.to_string(this.value), ',');
      let value_arr = value ? value.split(',') : [];
      let res = [].concat(value_arr);
      if (!value_arr.length) return res;
      s94Mjs.eachloop(this.options, 'children', function(row){
        let i = value_arr.indexOf(row.value);
        if(i !== -1) res[i] = row.content;
        return true;
      })
      return res;
    }
  },
}
</script>

<style scoped>
.content-checkbox>span{background-color: var(--el-color-primary);color: #fff;display: inline-block;margin: 02px;padding:0 02px;}
</style>